<!--
 * @Description: 系统首页
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:02
 * @LastEditors: 卢金辉 3400170271@qq.com
 * @LastEditTime: 2025-09-28 09:26:24
-->
<template>
  <div>
    <div class="header" style="margin-top: 30px; display: flex; margin-left: 15px;">
      <div style="flex: 1; height: 120px; background-color: orange;  border: 15px solid orange; margin-right: 15px;">
        <div class="card">设备总数</div>
        <div class="number">{{ a }}&nbsp;个</div>
      </div>
      <div
        style="flex: 1; height: 120px; background-color: orangered;  border: 15px solid orangered; margin-right: 15px;">
        <div class="card">在线设备数</div>
        <div class="number">{{ b }}&nbsp;个</div>
      </div>
      <div style="flex: 1; height: 120px; background-color: orchid;  border: 15px solid orchid; margin-right: 15px;">
        <div class="card">离线设备数</div>
        <div class="number">{{ c }}&nbsp;个</div>
      </div>
      <div style="flex: 1; height: 120px; background-color: red;  border: 15px solid red; margin-right: 15px;">
        <div class="card">工程总数</div>
        <div class="number">{{ d }}&nbsp;个</div>
      </div>
      <div style="flex: 1; height: 120px; background-color: purple;  border: 15px solid purple;">
        <div class="card">工单总数</div>
        <div class="number">{{ e }}&nbsp;个</div>
      </div>
    </div>
    <div class="bottom" style="margin-top: 30px; display: flex;">
      <div class="left" style="margin-right: 15px; flex: 2;">
        <div class="map" style=" height: 400px; padding-left: 15px;">
          <Map></Map>
        </div>
      </div>
      <div class="right" style="display: flex; flex-direction: column; flex: 3;">
        <div class="top" style="display: flex;">
          <div class="image" style=" height: 200px; margin-right: 15px;">
            <C221></C221>
          </div>
          <div class="image" style=" height: 200px;">
            <C222></C222>
          </div>
        </div>
        <div class="bottom" style="margin-top: 10px;">
          <div class="image3" style=" height: 200px;">
            <C223></C223>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { get } from '@/utils/request';
import C221 from './components/C221.vue';
import C222 from './components/C222.vue';
import C223 from './components/C223.vue';
import Map from './components/Map.vue';

export default {
  // 局部注册组件
  components: {
    C221,
    C222,
    C223,
    Map,
  },
  data() {
    return {
      total: [],
      a: 0,
      b: 0,
      c: 0,
      d: 0,
      e: 0,
    };
  },
  computed: {},
  methods: {
    async getTotal() {
      let res = await get('/count/countAll');
      // console.log(res, '222');
      this.total = res.data;
      this.a = this.total[0].value;
      this.b = this.total[1].value;
      this.c = this.total[2].value;
      this.d = this.total[3].value;
      this.e = this.total[4].value;
    },
  },
  created() {
    this.getTotal();
  },
  mounted() {

  },
}
</script>

<style scoped>
.card {
  margin-top: 15px;
  font-size: 18px;
  color: white;
}

.number {
  margin-top: 30px;
  font-size: 15px;
  color: white;
  text-align: right;
}
</style>